<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/default/easyui.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/demo/demo.css"></link>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
	
<style type="text/css">
	a:link,a:visited{
 		text-decoration:none;  /*超链接无下划线*/
	}
	a:hover{
 		text-decoration:none;  /*鼠标放上去有下划线*/
	}
</style>	
	<script type="text/javascript">
	 /*<![CDATA[*/ 
	function showFoodList()
	{
		$('#table').datagrid('loading');
		$.get("/foodListnoGroup", function(data){
				$("#table").datagrid("loadData", data);
				$('#table').datagrid('loaded');
			});
	}
	 
	 function clickQuery()
	 {
		 var tmp = encodeURIComponent($('#foodname1').val());
		  var name = $.trim(tmp);  
		  if(name.length==0)
		  {
			  showFoodList();
			  return;
		  }
		  var url = "getFoodByLikeNoGroup?foodname="+name;
		  $('#table').datagrid('loading');
		  $.get(url, function(data){
			  	$("#table").datagrid("loadData", data);
			  	$('#table').datagrid('loaded');
			});
	 }
	
	
	 $(document).ready(  
			  function(){
				  
 				
				  
				  $('#foodname').textbox('textbox').keydown(function (e) {
				      if (e.keyCode == 13) {
				    	  $('#price').textbox('textbox').focus(); 

				      }
				  });
				  
				  
				  
				  $('#foodname1').textbox('textbox').keydown(function (e) {
					  
					  if (e.keyCode == 13) {
						  clickQuery();
				      }
					  
					 
				  });
				    
				  $('#pp1').tooltip({
						position: 'bottom',
						content: '<span style="color:#fff">双击菜单添加至分组</span>',
						onShow: function(){
							$(this).tooltip('tip').css({
								backgroundColor: '#666',
								borderColor: '#666'
							});
						}
					});
				  
				  $('#pp2').tooltip({
						position: 'bottom',
						content: '<span style="color:#fff">双击移除菜单</span>',
						onShow: function(){
							$(this).tooltip('tip').css({
								backgroundColor: '#666',
								borderColor: '#666'
							});
						}
					});

				  
				  var url = "loadFoodComData";
				  $.get(url, function(data){
					  $('#cc').combobox("loadData", data);
					});
				  
				  showFoodList();
					   
			  });
	 
	   function loadAllandGroup(foodtypeid)
	   {
		   var url ="foodListGroup?id="+foodtypeid;
			  $.get(url, function(data){
				  	//$("#table").datagrid("loadData", data.allList);
					$("#table1").datagrid("loadData", data.groupList);
					
					$("#size").html(data.groupList.length);
				});
	   }
	 
	   function selectfunc(data)
	   {
		   loadAllandGroup(data.value);
	   }
	   
	   function onClickRow(index,rowdata){
		  
		 var  foodtype = $('#cc').combobox('getValue');
		 if(foodtype.length==0)
		 {
			 alert("请选择分组");
			 return;
		 }
		 $("#foodname1").textbox("setValue", "");
		 var url ="addfoodgroup?foodid="+rowdata.id+"&foodtypeid="+foodtype;
		  $.get(url, function(data1){
			  
			  loadAllandGroup(foodtype);
			  showFoodList();
			   
			});
		 
	   }
	
	   function onClickRow2(index,rowdata){
			  
			 var  foodtype = $('#cc').combobox('getValue');
			 if(foodtype.length==0)
			 {
				 alert("请选择分组");
				 return;
			 }
			 var url ="delfoodgroup?foodid="+rowdata.id+"&foodtypeid="+foodtype;
			  $.get(url, function(data1){
				  	
				  loadAllandGroup(foodtype);
				  showFoodList();
				   
				});
			 
		   }
	   
	   
	   function opendlg()
	   {
		  
		   $('#dlg1').dialog('open');
		   $('#foodname').textbox('textbox').focus(); 
	   }
	   var flag;
	   function submitForm(){
			var imglist = '';
			
			 var name= $.trim($("#foodname").val());
		     var price=$.trim($("#price").val());
		     
		     if(name.length==0)
		     {
		    	 alert("请输入菜品名称");
		    	 return;
		     }
		     
		     if(price.length==0)
		     {
		    	 alert("请输入价格");
		    	 return;
		     }
		     
		     if(isNaN(price))
		     {
		    	 alert("价格必须为数字");
		    	 return;
		     }
		     
		     $("[name='file']").each(function(){
				 var file = $(this).val();
	             if(file.length!=0)
	             {
	            	imglist = imglist+file+",";
	            	flag=1;
	             }
				 
	         });
		     
		     var score=  $("input[name='isfood']:checked").val();
			 if(typeof(score)=="undefined")
			 { 
					alert("请选择菜品或其他");
					return;
			 }
				
			 
			 if(flag>0)
			 {
				 	$('#image').val(imglist);
				 	$.post("addfood",
							$('#ff').serialize(),
							  function(data){
				 					flag=0;
				 					doUpload();
				 					$.messager.progress({ 
				 						title:'请稍后', 
				 						msg:'数据上传中...'
				 						});
				 				
				 					setTimeout(function(){
				 						 $.messager.progress('close');
				 						 showFoodList();
				 						 alert("上传成功");
				 						
										clearForm();
				 					},1000);
		
					 		  },"text");
				 	
			 }else
		     {
				 alert("请选择文件");
		     }
			
		
		}
		function clearForm(){
			flag=0;
			$('#ff').form('clear');
			$('#fileform').form('clear');
		}
		
		function doUpload() {  
			
			$("#fileform").submit();
			
		     
		     
		}  
		
		
		function clearFileForm(){
			$('#fileform').form('clear');
		}
		
		 function deleteFood(val)
		    {
		    	$.messager.defaults= { ok: "确定",cancel: "取消" };
		    	 
		    	$.messager.confirm("操作提示","您确定要执行操作吗？",
		    		function (data)
		    	 	{
		    	            if (data)
		    	 			{
		    	            	var url = "delete_food?id="+val;
		    			    	$.get(url, function(data){
		    			    			showFoodList();
		    					});
		    	            }
		    	            
		    	     });
		
		    }
		
		function formatColumn(val,row){
	 		var surl ="show_fooddetail?id="+val;
			return '<a href="#" onclick="self.parent.addPanel(\''+row.foodname+'\',\''+surl+'\')">查看</a>&nbsp;&nbsp;<a href="#"  onclick="deleteFood(\''+val+'\')">删除</a>'
			
		}
	   

	 	/*]]>*/  
	</script>
	
	
</head>
<body>


<div id="pp1" style="position:absolute;left:0px;top:0px;height:90%;">
	<table id="table" class="easyui-datagrid" title="未加入分组" style="width:300px;height:100%;" 
			data-options="singleSelect:true,collapsible:false,onDblClickRow: onClickRow,toolbar:'#tt'">
		<thead>
			<tr>
				<th data-options="field:'foodname'" width="40%">菜名</th>
				<th data-options="field:'price'" width="30%">价格</th>
				<th data-options="field:'id',align:'center',formatter:formatColumn" width="30%">操作</th>
				
			</tr>
		</thead>
	</table>
</div>

<div id="pp2" style="position:absolute;left:300px;top:0px;height:90%;">
	<table id="table1" class="easyui-datagrid" title="已加入分组" style="width:300px;height:100%;"
			data-options="singleSelect:true,collapsible:false,onDblClickRow: onClickRow2,toolbar:'#tb'">
		<thead>
			<tr>
				<th data-options="field:'foodname'" width="50%">菜名</th>
				<th data-options="field:'price'" width="50%">价格</th>

			</tr>
		</thead>
	</table>
</div>

	<div id="tt" style="padding:2px 5px;">
		<input class="easyui-textbox" data-options="prompt:'按回车查询'" name ="foodname1"  id="foodname1" style="width:100px"/>
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="opendlg()">新增菜品</a>
	</div>

	<div id="tb" style="padding:2px 5px;">
		<select class="easyui-combobox" id="cc" data-options="onSelect:selectfunc" panelHeight="auto" style="width:100px">
		</select>
	</div>
	
	<div id="dlg1" class="easyui-dialog" title="评价详情" data-options="closed:true,modal:true"  style="width:330px;height:300px;">
			<center>
       	<form id="ff" style="margin:0px">
       	    <table>
       	     
       	    	<tr>
       	    		<td>菜&nbsp;&nbsp;名：</td>
       	    		<td><input class="easyui-textbox" name="foodname" id="foodname" style="width:120px"/></td>
       	    	</tr>
       	    	<tr>
       	    		<td>价&nbsp;&nbsp;格：</td>
       	    		<td><input class="easyui-textbox" name="price" id="price" style="width:120px"/></td>
       	    	</tr>
       	    	<tr><td><input type="hidden" id ="image" name="image"/></td></tr>
       	    	<tr>
       	    		<td></td>
       	    		<td>菜品<input type="radio" name="isfood" value="1" />&nbsp;&nbsp;&nbsp;
          	 			其他<input type="radio" name="isfood" value="2" />
          	 		 </td>
       	    	</tr>
       	    </table>
         	</form>
          <form id="fileform" method="POST" enctype="multipart/form-data"  action="/upload" target="ajaxUpload" style="margin:0px"> 
         <table>
         
         	<tr>
         		<td>图片1：</td>
         		<td><input class="easyui-filebox" name="file" data-options="prompt:'选择文件',buttonText:'&nbsp;选&nbsp;择&nbsp;'" style="width:120px"/></td>
         	</tr>
         	<tr>
         		<td>图片2：</td>
         		<td><input class="easyui-filebox" name="file" data-options="prompt:'选择文件',buttonText:'&nbsp;选&nbsp;择&nbsp;'" style="width:120px"/></td>
         	</tr>
         	<tr>
         		<td>图片3：</td>
         		<td><input class="easyui-filebox" name="file" data-options="prompt:'选择文件',buttonText:'&nbsp;选&nbsp;择&nbsp;'" style="width:120px"/></td>
         	</tr>
         	<tr>
         		<td>图片4：</td>
         		<td><input class="easyui-filebox" name="file" data-options="prompt:'选择文件',buttonText:'&nbsp;选&nbsp;择&nbsp;'" style="width:120px"/></td>
         	</tr>
         	
         	<tr>
         		<td>图片5：</td>
         		<td><input class="easyui-filebox" name="file" data-options="prompt:'选择文件',buttonText:'&nbsp;选&nbsp;择&nbsp;'" style="width:120px"/></td>
         	</tr>
         	
         </table>
         </form>
         <a href="#" class="easyui-linkbutton" onclick="submitForm()">上&nbsp;&nbsp;传</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="easyui-linkbutton" onclick="clearFileForm()">重&nbsp;&nbsp;置</a>
        
         </center>
         
         <iframe name="ajaxUpload" style="display:none;"></iframe>
	</div>

	
</body>
</html>